<template>
  <div id="SettlementPc" class="container-fluid">
    <div class="row">
      <div class="col-md-3 col-lg-2 sidebar">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
            <span class="h2">{{tab_num}}<small> 号桌 结账</small></span>
            <span class="btn btn-sm btn-danger pull-right" @click="retreat">退菜</span>
          </div>
          <div class="panel-body">
            <div class="main">
              <table class="table">
                <thead>
                    <tr>
                      <th>菜品</th>
                      <th>单价</th>
                      <th>数量</th>
                    </tr>
                </thead>
                <tbody>
                  <tr :key="i.id" v-for="i in menuList">
                    <td>{{i.menu_name}}</td>
                    <td>{{i.price}}</td>
                    <td>{{i.num}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <span @click="confirm" class="btn btn-info btn-block btn-lg">总价 ￥{{total}}</span>  
        </div>  
      </div>
      <div class="col-md-6 col-lg-8">
        <div class="panel panel-default">
          <div class="panel-body">
            <h2>
              <span class="col-md-3 col-lg-3">应收金额</span>
              <input type="tel" :value="total" class="text-right" size="15" readonly="readonly" disabled="disabled">
            </h2>
            <div class="clearfix"></div>
            <h2>
              <span class="col-md-3 col-lg-3">实收金额</span>
              <input readonly="readonly" type="tel" :value="fracture" class="text-right" size="15">
              <select v-model="fold">
                <option value="">无折扣</option>
                <option v-for="i in discount" :key="i.id" :value="i.discount">{{i.name}}</option>
              </select>
            </h2>
          </div>
        </div>
        <div class="panel panel-primary">
          <div class="panel-body">
            <h2>
              <span class="col-md-3 col-lg-3">收到{{pay_way[payIndex].name}}</span>
              <input type="tel" v-model="receive" class="text-right" size="15">
            </h2>
          </div>
        </div>
        <div class="panel panel-info">
          <div class="panel-body">
            <h2>
              <span class="col-md-3 col-lg-3">找零</span>
              <input type="tel" :value="change" class="text-right" size="15" readonly="readonly">
              </h2>
          </div>
        </div>
        <div class="panel panel-info">
          <div class="panel-body">
            <h2>
              <span class="col-md-3 col-lg-3">备注</span>
              <textarea rows="1" v-model="remark"></textarea>
              </h2>
          </div>
        </div>
        <button @click="confirm" class="btn btn-success btn-lg btn-block subprint">
            <span class="glyphicon glyphicon-ok"></span> 确认
            <div class="small">结账完毕</div>
        </button>
        <hr>
        <a type="button" class="btn btn-danger btn-block">返回</a>
      </div>
      <div class="col-md-3 col-lg-2">
          <h3>打印小票</h3>
          <p><a @click="printer" class="btn btn-warning btn-block btn-lg printer">打印小票</a></p>
          <hr>
          <h3>支付方式</h3>
          <ul class="nav nav-pills " role="tablist" id="pay_method">
              <li @click="payIndex=index" :key="index" :class="{active:payIndex == index}" v-for="(i,index) in pay_way"><a href="javascript:;">{{i.name}}</a></li>
          </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { axios, accAdd, accMul, Subtr } from "@/static/js/utils";
export default {
  name: "SettlementPc",
  data() {
    return {
      menuList: [],
      discount: [],
      pay_way: [
        { name: "现金", methods: "1" },
        { name: "刷卡", methods: "2" },
        { name: "扫码", methods: "5" }
      ],
      payIndex: 0,
      fold: "",
      receive: "",
      tab_num: ""
    };
  },
  computed: {
    total() {
      let total = 0;
      this.menuList.forEach(item => {
        total = accAdd(total, accMul(item.price, item.num));
      });
      return total.toFixed(2);
    },
    fracture() {
      let fracture = this.fold
        ? accMul(this.total, this.fold / 10)
        : this.total;
      return parseFloat(fracture).toFixed(2);
    },
    change() {
      return Subtr(this.receive, this.fracture);
    }
  },
  methods: {
    /**
     * 退菜
     */
    retreat() {
      openWindow("retreat.html", "退菜", {
        desk_id: plus.webview.currentWebview().desk_id,
        order_id: plus.webview.currentWebview().order_id
      });
    },
    printer() {
      axios
        .post("menu/printer", {
          order_id: plus.webview.currentWebview().order_id,
          paid: this.receive,
          remark: this.remark
        })
        .then(res => {});
    },
    confirm() {
      mui.confirm(
        "请确认已结账，并且打印小票",
        "提示",
        ["确认", "取消"],
        res => {
          if (res.index == 0) {
            axios
              .post("menu/check_out", {
                order_id: plus.webview.currentWebview().order_id,
                paid: this.receive,
                change: this.change,
                pay_way: this.pay_way[this.payIndex].methods,
                remark: this.remark
              })
              .then(res => {
                if (res.data.code) {
                  mui.back();
                }
              });
          }
        }
      );
    }
  },
  created() {
    // console.log(plus.webview.currentWebview().order_id)
    this.tab_num = plus.webview.currentWebview().tab_num;
    axios
      .get("menu/read", {
        params: {
          order_id: plus.webview.currentWebview().order_id
        }
      })
      .then(res => {
        this.menuList = res.data.data.lists;
        this.discount = res.data.data.discount;
        this.receive = this.total;
      });
  },
  mounted() {
    let that = this;
    window.addEventListener("reload", function() {
      axios
        .get("menu/read", {
          params: {
            order_id: plus.webview.currentWebview().order_id
          }
        })
        .then(res => {
          that.menuList = res.data.data.lists;
        });
    });
  }
};
</script>
<style scoped>
.main {
  height: 78vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  color: #ffffff;
  background-color: #bc2923;
}
.nav-pills > li > a {
  color: #bc2923;
}
</style>

